<template>
  <div class="ecs" ref="mainChart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartPie',
  props: {
    pieData: {
      type: Array,
      default: () => []
    },
    labelShow:{
      type:Boolean,
      default:true
    },
    pieColor:{
      type: Array,
      default: () => []
    },
    labelColor:{
      type: Array,
      default: () => []
    },
    legendShow:{
      type:Boolean,
      default:false
    },
    legendItemGap:{
      type:Number,
      default:10
    },
    legendTop:{
      type:String,
      default:''
    },
    pieFormatter:{
      type:String,
      default:''
    },
    pieRadius:{
      type: Array,
      default: () => []
    },
    pieCenter:{
      type: Array,
      default: () => ["50%","50%"]
    },
    labelFontsize:{
      type:Number,
      default:12
    },
    labelPosition:{
      type:String,
      default:'center'
    },
    legendFontsize:{
      type:Number,
      default:12
    },
    legendItemsize:{
      type: Array,
      default: () => []
    },
    tooltipTrigger:{
      type:String,
      default:''
    },
    seriesName:{
      type:String,
      default:''
    },
    labelLineLength:{
      type:Number,
      default:8
    },
    labelLineLength2:{
      type:Number,
      default:10
    },
    labelLineWidth:{
      type:Number,
      default:1
    },
  },
  data() {
    return {
      myOption: {
        color:this.pieColor,
        tooltip:{
          trigger:this.tooltipTrigger
        },
        legend: {
          show: this.legendShow,
          top: this.legendTop,
          left: 'center',
          itemWidth: this.legendItemsize[0],
          itemHeight: this.legendItemsize[1],
          textStyle:{
            // 浅色系用色--#24916c，深色系用色--#10f2bb
            color: "#c5e1f0",
            fontSize: this.legendFontsize
          }
        },
        series: [
          {
            name: this.seriesName,
            type: 'pie',
            center: this.pieCenter,
            radius: this.pieRadius,
            avoidLabelOverlap: false,
            label: {
              show: this.labelShow,
              position: this.labelPosition,
              // 浅色系用色--#24916c，深色系用色--#10f2bb
              color: '#10f2bb',
              fontSize: this.labelFontsize,
              fontWeight: 'bold',
              fontFamily:'shuziFont',
              formatter: this.pieFormatter
            },
            labelLine: {
              length: this.labelLineLength,
              length2: this.labelLineLength2,
              lineStyle:{
                width: this.labelLineWidth
              }
            },
            emphasis: {
              disabled: true
            },
            data: this.pieData
          }
        ]
      }
    }
  },
  computed: {
    totalValue(){
      let total = 0
      this.pieData.map(function(item){
        total += parseInt(item.value)
      })
      return total.toString()
    }
  },
  mounted() {
    let main = this.$refs.mainChart;
    let myChart = echarts.init(main,null,{renderer:'svg'});
    myChart.setOption(this.myOption);
  },
  watch: {
    pieData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].data = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    pieColor: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].color = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    labelColor: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].label.color = newVal;
          if (this.labelShow==true) {
            this.myOption.legend.textStyle.color = newVal;
          }
          
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    labelFontsize: {
      deep: true,
      immediate: true,
      handler() {
        this.$nextTick(()=>{
          this.myOption.series[0].label.fontSize = this.labelFontsize;
          if (this.labelShow==true) {
            this.myOption.legend.textStyle.fontSize = this.legendFontsize;
          }
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    labelLineWidth: {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          if (this.labelShow==true) {
            this.myOption.series[0].labelLine.length = this.labelLineLength;
            this.myOption.series[0].labelLine.length2 = this.labelLineLength2;
            this.myOption.series[0].labelLine.lineStyle.width = this.labelLineWidth;
          }
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
          console.log("pie组件：",this.labelLineWidth);
        })
      }
    },
    legendItemsize: {
      deep: true,
      immediate: true,
      handler() {
        this.$nextTick(()=>{
          this.myOption.series[0].label.fontSize = this.labelFontsize;
          if (this.legendShow==true) {
            this.myOption.legend.textStyle.fontSize = this.legendFontsize;
            this.myOption.legend.itemGap = this.legendItemGap;
            this.myOption.legend.itemWidth = this.legendItemsize[0];
            this.myOption.legend.itemHeight = this.legendItemsize[1];
          }
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          
        })
      }
    },
  }
}
</script>
<style lang="less" scoped>
.ecs {
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>